<template>
    <el-form
        :model="formData"
        class="form-inline"
        label-width="100px"
        status-icon
        :inline="true"
    >
        <el-row>
            <el-col :span="6">
                <el-form-item label="月份选择" prop="month">
                    <el-date-picker
                        v-model="formData.month"
                        type="month"
                        placeholder="选择月份"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="成本中心" prop="fee_owner">
                    <el-select
                        v-model="formData.fee_owner"
                        filterable
                        placeholder="select"
                        :clearable="true"
                    >
                        <el-option
                            v-for="optionvalue in cntrOwner"
                            :key="optionvalue.value"
                            :value="optionvalue.value"
                            :label="optionvalue.label"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-button
                    type="primary"
                    @click="onRefresh($refs)"
                    size="default"
                    >查询</el-button
                >
                <el-button type="primary" @click="handleCommand" size="default"
                    >导出</el-button
                >
            </el-col>
        </el-row>
    </el-form>

    <div class="tab-report">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabChange">
            <el-tab-pane label="资产往来明细表" name="assetclass">
                <asset-class-report ref="assetclassRef"></asset-class-report>
            </el-tab-pane>
            <el-tab-pane label="负债类往来明细表" name="liability">
                <liability-class-report ref="liabilityRef"></liability-class-report>
            </el-tab-pane>
            <el-tab-pane label="成本费用明细表" name="feedetout">
                <feedet-out-report ref="feedetoutRef"></feedet-out-report>
            </el-tab-pane>
            <el-tab-pane label="银行存款明细表" name="category">
                <categoryreport ref="categoryRef"></categoryreport>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup lang="ts" name="FinanceReport">

import { ref, reactive } from 'vue';
import { storeToRefs } from 'pinia';
import categoryreport from './CategoryReport.vue';
import FeedetOutReport from './FeedetOutReport.vue';
import AssetClassReport from './AssetClassReport.vue';
import LiabilityClassReport from './LiabilityClassReport.vue';
import { ElMessage, TabPaneName } from 'element-plus';
import { useAppStore } from '@/store/app';
import { BusiReportParam } from '@/common/types/report';

const formData = reactive<BusiReportParam>({
    month: new Date(),
});

const { cntrOwner } = storeToRefs(useAppStore());
const categoryRef = ref();
const feedetoutRef = ref();
const assetclassRef = ref();
const liabilityRef = ref();
const activeName = ref('assetclass');
const onRefresh = async (refs: any) => {
    if (formData.month) {
        refs[`${activeName.value}Ref`].refresh(formData);
    } else {
        ElMessage.info({
            message: '请选择月份',
        });
    }
};
const tabChange = (name: TabPaneName) => {
    
    activeName.value = name as string;
    // console.log(ev);
}
const handleCommand = () => {
    // exportExcel('feedetreport-table-feedetreport');
};
</script>
<style lang="scss" scoped>
.form-inline .el-input {
    --el-input-width: 220px;
}

.form-inline .el-select {
    --el-select-width: 220px;
}
.demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>
